import React, { useState, useRef } from 'react'
import {message ,Button,Popconfirm,Divider} from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect} from 'umi'
import { PlusOutlined } from '@ant-design/icons'
import { queryResignList,saveResignInfo,sendDimissionBpm,deleteDimissionInfo} from '../service'
import { BPMStatusEnum, resignStatusList } from '@/utils/constant'
import moment from 'moment'
import AddResignForm from './components/AddResignForm';
import store from 'store2';

const TableList = ({currentUser}) => {
  const actionRef = useRef()
  const [visible, setVisible] = useState(false);
  const [loading,setLoading] = useState(false);
  const [record,setRecord] = useState(null);
  const [flag,setFlag] = useState(false);

  const addResign = () =>{
    setVisible(true)
  };

  const handleCancel = () => {
    setVisible(false);
    setRecord(null);
  };

  const handleSubmit = (values) => {
    setLoading(true);
    saveResignInfo(values).then((res)=>{
      if(res.flag){
        setVisible(false)
        store.remove(`personnel-resign-application-` + currentUser.id);
        message.success('离职申请新建成功！');
        actionRef.current.reload()
      }else{
        message.error(res.error);
      }
      setLoading(false)
    })
  };

  const sendBpm = (record) => {
    sendDimissionBpm(record.id,record.oid).then(res => {
      if(res.flag){
        window.open(res.data);
        message.success('离职申请发起成功！');
        actionRef.current.reload()
      }else{
        message.error(`发起bpm错误:`+res.error);
      }
    })
  };

  const delResign = (id) => {
    setLoading(true);
    deleteDimissionInfo(id).then(res => {
      if(res.flag){
        message.success('离职申请删除成功！');
        actionRef.current.reload()
      }else{
        message.error(`删除错误:`+res.error);
      }
    })
  };

  const edit = (record) => {
    setRecord(record);
    setVisible(true);
  };

  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '工号',
      hideInSearch: true,
      dataIndex: 'code',
      key:'code',
    },
    {
      title: '账号',
      hideInSearch: true,
      dataIndex: 'oid',
      key:'oid',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInSearch: true,
      key:'name'
    },
    {
      title: '公司',
      dataIndex: 'orgname',
      key:'orgname'
    },
    {
      title: '部门',
      hideInSearch: true,
      dataIndex: 'unitname',
      key:'unitname'
    },
    {
      title: '岗位',
      dataIndex: 'jobname',
      key:'jobname'
    },
    {
      title: '入职日期',
      dataIndex: 'hiredate',
      hideInSearch: true,
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY-MM-DD') : '';
      },
    },
    {
      title: '离职日期',
      dataIndex: 'dimissionTime',
      hideInSearch: true,
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY-MM-DD') : '';
      },
    },
    {
      title: '审批状态',
      dataIndex: 'rurnoverStatus',
      key:'rurnoverStatus',
      hideInSearch: true,
      valueEnum: BPMStatusEnum
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        <>
          {
            (record.rurnoverStatus === 0) && <>
              <a onClick={() => edit(record)}>编辑</a>
              <Divider type="vertical"/>
              <Popconfirm title={`是否确认删除?`} onConfirm={() => delResign(record.id)} okText="是" cancelText="否">
                <a>删除</a>
              </Popconfirm>
              <Divider type="vertical"/>
              <Popconfirm title="是否发起离职申请？" cancelText='否' okText='是' onConfirm={() => sendBpm(record)}>
                <a>发起离职</a>
              </Popconfirm>
            </>
          }
          {(record.rurnoverStatus === 1 || record.rurnoverStatus === 2) && <><a onClick={() => window.open(record.bpmDetailUrl)}>审批详情</a></>}
        </>
      ),
    }
  ]

  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        request={(params) => queryResignList(params).then(res => {
          res.data.length > 0 && res.data.map((item,key) => {
            if(item.rurnoverStatus !== 2){
              setFlag( item.rurnoverStatus !== 2 ? true:false);
              return;
            }
          });
          return res;
        })}
        search={false}
        columns={columns}
        toolBarRender={(action, { selectedRows }) => [
          <Button type="primary" disabled={flag} onClick={() => addResign()}><PlusOutlined/>离职申请</Button>,
        ]}
      />
      <AddResignForm
        loading={loading}
        visible={visible}
        record={record}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />
    </PageHeaderWrapper>
  )
}

export default connect(({user}) => ({
  currentUser: user.currentUser,
}))(TableList)
